<template>
  <div class="dy-main">
    <div class="dy-header">
      <x-header :right-options="{showMore: true}" :left-options="{preventGoBack:true}" @on-click-back="back" @on-click-more="showMenus = true">标题</x-header>
    </div>
    <div class="dy-body">
      <div class="dy-wapper">
        <scroller lock-x>
          <div class="scroller-box">
            <div class="zx-charts">
              <div id="myChart_0" :style="{width: '100%', height: '4rem'}"></div>
            </div>
            <div class="zx-charts" style="margin-top:0.2rem;">
              <div id="myChart_1" :style="{width: '100%', height: '4rem'}"></div>
            </div>
          </div>
        </scroller>
      </div>
    </div>
    <div class="dy-footer"></div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.drawLine()
  },
  computed: {
    myChart () {
      return this.$echarts.init(document.getElementById('myChart_0'))
    },
    myChart1 () {
      return this.$echarts.init(document.getElementById('myChart_1'))
    }
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    drawLine () {
      this.myChart.setOption(this.echartOption)
      this.myChart1.setOption(this.option)
      this.myChart.resize()
      this.myChart1.resize()
    }
  },
  data () {
    return {
      echartOption: {
        title: {
          left: 'left',
          text: '七日年化走势'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['0982', '0982', '0982', '0982', '0982', '0982', '0982', '0982']
        },
        yAxis: {
          type: 'value'
        },
        legend: {left: 0, top: 0, bottom: 0, right: 0},
        grid: {left: '30', top: '40rem', bottom: '30', right: 0},
        color: ['#FF6633'],
        series: [
          {
            type: 'line',
            data: [3, 1, 0, 4, 6, 2, 1, 4],
            smooth: true
            // areaStyle: {}
          }
        ]
      },
      option: {
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        // color: ['#FF6633'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '0.3rem',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {value: 335, name: '直接访问'},
              {value: 310, name: '邮件营销'},
              {value: 234, name: '联盟广告'},
              {value: 135, name: '视频广告'},
              {value: 1548, name: '搜索引擎'}
            ]
          }
        ]
      }
    }
  },
  watch: {
  }
}
</script>
<style>
</style>
